<template>
  <!-- 视图切换下拉框 -->
  <div class="view-drop-down">
    <el-select
      v-model="viewSelectValue"
      :placeholder="$t('common.placeholder.select')"
      :style="{ width: '110px' }"
      :popper-append-to-body="false"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { reactive, toRefs, computed } from 'vue';
import i18n from '@src/locales';

export default {
  props: {
    selectValue: {
      type: String | Number,
      default: '1',
    },
  },
  emits: ['handleChangeView'],
  setup(props, { emit }) {
    const state = reactive({
      options: [
        {
          value: '1',
          label: i18n.t('contract.listView'),
        },
        {
          value: '2',
          label: i18n.t('contract.scheduleView'),
        },
      ],
    });

    const viewSelectValue = computed({
      get: () => {
        return props.selectValue;
      },
      set: val => {
        emit('handleChangeView', val);
      },
    });

    return {
      ...toRefs(state),
      viewSelectValue,
    };
  },
};
</script>
<style lang="scss" scoped>
.view-drop-down {
  margin-bottom: 6px;
  ::v-deep .el-input--small{
    font-size: 14px;
  }
  ::v-deep .el-input__inner {
    border: 1px solid #fff !important;
    padding-left: 20px;
  }
  ::v-deep .el-popper[x-placement^=bottom] {
    margin-top: 0px;
  }
}
</style>